<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item>心理答疑管理</el-breadcrumb-item>
		<el-breadcrumb-item>问题管理</el-breadcrumb-item>
	</el-breadcrumb>

	<el-form :inline="true" :model="queryProblem" class="demo-form-inline">
		<el-form-item label="问题标题">
			<el-input v-model="queryProblem.problemName" placeholder="请输入问题进行搜索" clearable @clear="querydataList" />
		</el-form-item>
		<el-form-item label="提问昵称">
			<el-input v-model="queryProblem['user.nickname']" placeholder="请输入提问昵称" clearable @clear="querydataList" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="querydataList">搜索</el-button>
			<el-button type="danger" @click="batchRemove">批量删除</el-button>
		</el-form-item>
	</el-form>

	<el-table :data="dataList" border row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
		<el-table-column type="selection" fixed="left" width="40" />
		<el-table-column property="id" label="ID" fixed="left" />
		<el-table-column property="problemName" label="问题标题" />
		<el-table-column property="content" label="问题内容" />
		<el-table-column property="user.nickname" label="提问用户昵称" />
		<el-table-column property="createTime" label="提问时间" />
		<el-table-column fixed="right" label="操作" min-width="50">
			<template #default='scope'>
				<el-button type="primary" size="small" @click="check(scope.row)">查看</el-button>
				<el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>

	<el-pagination v-model:current-page="queryProblem.pageNum" v-model:page-size="queryProblem.pageSize"
		:page-sizes="[5, 10, 15, 20]" size="default" layout="total, sizes, prev, pager, next, jumper" :total="total"
		@size-change="handleSizeChange" @current-change="handleCurrentChange" />

	<!-- 查看的对话框 -->
	<el-dialog :title="title" v-model="dialogFormVisible" width="950">
		<el-form :model="problemData" label-width="100">
			<el-form-item label="问题标题">
				<el-input v-model="problemData.problemName" autocomplete="off" readonly></el-input>
			</el-form-item>
			<el-form-item label="问题内容">
				<el-input type="textarea" v-model="problemData.content" autocomplete="off" readonly></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancle">
					关闭
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ElMessage, ElMessageBox } from 'element-plus';
	import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps, UploadUserFile } from 'element-plus'

	const queryProblem = reactive({
		id: '',
		problemName: '',
		'user.nickname': '',
		userId:'',
		pageNum: 1,
		pageSize: 5
	})

	// 总数据量
	const total = ref(0)

	const axios = getCurrentInstance().appContext.config.globalProperties.axios

	const querydataList = () => {
		axios.get('problem/page', {
			params: queryProblem
		}).then((resp) => {
			if (resp.code == 200) {
				dataList.value = resp.data.list;
				total.value = resp.data.total;
			} else {
				ElMessage.error('数据查询失败')
			}
		})
	}

	onMounted(() => {
		querydataList()
	})

	const dataList = ref([])

	const multipleSelection = ref([])
	const handleSelectionChange = (val : any[]) => {
		multipleSelection.value = val.map(item => {
			return item.id
		})
		console.log(multipleSelection.value);
	}
	// 动态标题
	const title = ref('')
	// 控制对话框是否显示
	const dialogFormVisible = ref(false)
	// 查看问题
	const problemData = ref({
		id: '',
		nickname: '',
		content :'',
		problemName: '',
	})
 
	const check = (row) => {
		title.value = '查看'
		dialogFormVisible.value = true
		problemData.value = row;

	}

	const handleSizeChange = () => {
		querydataList()
	}
	const handleCurrentChange = () => {
		querydataList()
	}

	const cancle = () => {
		problemData.value = {
			id: '',
			nickname: '',
			content :'',
			problemName: '',
		}
		dialogFormVisible.value = false
	}

	const remove = (id) => {
		ElMessageBox.confirm(
			'此操作将永久删除该数据, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete(`problem/${id}`)
				.then((resp) => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error('删除失败')
					}
					querydataList()
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})
	}

	const batchRemove = () => {
		ElMessageBox.confirm(
			'此操作将永久删除该数据, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(() => {
			axios.delete('problem', {
				params: {
					ids: multipleSelection.value.join(',')
				}
			})
				.then(resp => {
					if (resp.code == 200) {
						ElMessage.success('删除成功')
					} else {
						ElMessage.error('删除失败')
					}
					querydataList()
				})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除',
			})
		})
	}
</script>

<style scoped>
	.el-breadcrumb {
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 20px;
	}

	.demo-form-inline .el-input {
		--el-input-width: 220px;
	}

	.demo-form-inline {
		padding: 10px 0;
	}

	.el-pagination {
		margin-top: 15px;
	}
</style>